<template>
    <div>
        <el-card>
            <el-table
    ref="multipleTableRef"
    :data="tableData"
    :style="{ width: w + 'px' }"
    
  >
    <el-table-column  label="医生头像" width="120">
        <template #default="scope">
            <img v-if="scope.row.head.includes('null')" src='https://img1.baidu.com/it/u=3051078619,3976454386&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' alt="" style="width:80px;height:80px;border-radius: 5px;">
            <img v-else-if="scope.row.head.includes('xxx')" src='https://tse2-mm.cn.bing.net/th/id/OIP-C.m9rt0bEfWhyCQ00EhJKCxAHaHa?w=191&h=191&c=7&r=0&o=5&pid=1.7' alt="" style="width:80px;height:80px;border-radius: 5px;">
            <img v-else :src=scope.row.head  alt="" style="width:80px;height:80px;border-radius: 5px;">
        </template>
        
    </el-table-column>
    <el-table-column property="name" label="医生名称"  />
    <el-table-column property="department" label="科室"  />
    <el-table-column property="price" label="处方金额"  />
    <el-table-column label="操作" width="120">
      <template #default="scope">
      
      <el-button link type="primary"  title="展示处方" @click="viewInfo(scope.row)"><el-icon><ChatLineSquare /></el-icon> </el-button>
    
      </template>
    </el-table-column>
  </el-table>
  <el-pagination style="margin-top:20px"
      v-model:current-page="data.pageinfo.page"
      v-model:page-size="data.pageinfo.size"
      :page-sizes="[5, 10, 20, 50]"
      small="small"
      :disabled=false
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    />
        </el-card>
        <el-dialog v-model="dialogVisible" title="处方详情">
            <el-table
    :data="tableInner"
    style="width: 100%"
  >
    <el-table-column  label="药品名称" width="120"/>
    <el-table-column property="name" label="药品图片"  >
    <template #default="scope">
            <img :src=scope.row.head alt="" style="width:80px;height:80px;border-radius: 5px;">
        </template>
    </el-table-column>
    <el-table-column property="department" label="药品规格"  />
    <el-table-column property="price" label="药品单价"  />
    <el-table-column property="price" label="药品数量"  />
    <el-table-column property="price" label="有效器"  />
    <el-table-column property="price" label="用量备注"  />
    
  </el-table>
  
  <span>总价：{{  }}</span>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount,onMounted, reactive, ref, watch } from 'vue';
import { useStore } from 'vuex';


//表格大小适配
onMounted(() => {
    window.addEventListener('resize',tableResize)
})

onBeforeUnmount(() => {
    window.removeEventListener('resize',tableResize)
    
})
const w=ref()
//表格大小动态变化
const tableResize=()=>{
    
    w.value=document.body.offsetWidth-300
    
    
}
//路由配置
const store=useStore();

const data=reactive({

    pageinfo:{
        page:1,
        size:5
    },
    tableInner:[]
    
})
onMounted(async () => {
    const res=await store.dispatch('ljh/A_doctorList',data.pageinfo)
    // console.log(res);   
})

const tableData=computed(()=>{
    return store.state.ljh.doctorList
})


const tableInner=computed(()=>{
    return store.state.ljh.recipelinfo
})

// const tableInner=[]
const dialogVisible=ref(false)
//打开对话框
const viewInfo=async (row)=>{
    dialogVisible.value = true;
    console.log(row);
    console.log(row.id);
    const res=await store.dispatch('ljh/A_prescriptionInfo',{id:row.id})
    console.log(store.state.ljh.recipelinfo);  
    // data.tableInner=store.state.ljh.recipelinfo
    
}

//监听pageinfo发生变化
watch(()=>data.pageinfo,()=>{
    store.dispatch('ljh/A_doctorList',data.pageinfo)
},{deep:true})


</script>

<style scoped lang="scss">

</style>